/* Interactive parts of the about page. Each is self-contained and reads its
copy from ABOUT_EN / ABOUT_CS in about-content.js. */
/* Gradient field. On a desktop pointer the puddles follow the cursor. Anywhere
without hover - phones, tablets - there is nothing to follow, so the field
sits still at its resting position instead. Position drives a CSS variable
either way, so the paint stays on the compositor. */
function GradientField({ children, height = '100%' }) {
const ref = React.useRef(null);
/* Same gate as PhotoBlock and the CSS breakpoint: a real pointer AND a
desktop-width viewport. A touch device that reports (hover: hover) - and
the phone preview frame does - must still get the static field. */
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const mq = window.matchMedia('(hover: hover) and (min-width: 1025px)');
let frame = 0;
const move = (ev) => {
if (frame) return;
frame = requestAnimationFrame(() => {
frame = 0;
const r = el.getBoundingClientRect();
el.style.setProperty('--mx', `${((ev.clientX - r.left) / r.width) * 100}%`);
el.style.setProperty('--my', `${((ev.clientY - r.top) / r.height) * 100}%`);
});
};
const apply = () => {
el.removeEventListener('pointermove', move);
if (mq.matches) { el.addEventListener('pointermove', move); return; }
/* Back to rest, in case the window shrank mid-hover. */
el.style.setProperty('--mx', '50%');
el.style.setProperty('--my', '40%');
};
apply();
mq.addEventListener('change', apply);
return () => { mq.removeEventListener('change', apply); el.removeEventListener('pointermove', move); if (frame) cancelAnimationFrame(frame); };
}, []);
return (
{/* the field has to dissolve into the page, not stop at an edge */}
{children}
);
}
/* Reveals its children one at a time when scrolled into view. */
function Reveal({ children, delay = 0, as = 'div', style = {} }) {
const ref = React.useRef(null);
const [on, setOn] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { setOn(true); return; }
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
const Tag = as;
return (
{children}
);
}
/* Career timeline: a sticky year rail on the left, entries that light up as
they pass the reading line. */
function CareerTimeline({ data }) {
const [active, setActive] = React.useState(0);
const refs = React.useRef([]);
React.useEffect(() => {
if (!('IntersectionObserver' in window)) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) setActive(Number(e.target.dataset.i));
});
}, { threshold: 0.55, rootMargin: '-20% 0px -35% 0px' });
refs.current.forEach((el) => el && io.observe(el));
return () => io.disconnect();
}, [data.entries.length]);
const mono = { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase' };
return (
);
}
/* The craft. Same lesson as the services rebuild: a click-driven rail with one
panel beats hover-dimming - no flicker as the cursor crosses, and the depth
distinction is stated in words rather than encoded in font weight, which a
reader has to be told to decode. */
function SkillMap({ data, tone = 'light' }) {
const dark = tone === 'dark';
const [active, setActive] = React.useState(0);
const mono = { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase' };
const group = data.groups[active];
return (
{data.groups.map((g, i) => {
const on = i === active;
return (
);
})}